<template>
  <div>
    <h3>下级机构</h3>
    <div class="container">
      <vxe-toolbar>
        <template #buttons>
          <el-radio-group v-model="radio" @change="radioChange">
            <el-radio-button label="search4leader">主管厅局</el-radio-button>
            <el-radio-button label="search4school">训练机构</el-radio-button>
          </el-radio-group>
          <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索" @keyup="searchEvent"></vxe-input>
        </template>
      </vxe-toolbar>
      <vxe-table resizable ref="XTable" show-overflow border max-height="800" stripe highlight-hover-row highlight-current-row
        :loading="loading" :data="dataList" @sort-change="sortChange">
        <vxe-table-column field="name" title="机构名称" sortable></vxe-table-column>
        <vxe-table-column field="orgFocusType" title="集中类型" sortable></vxe-table-column>
        <vxe-table-column field="orgProperty" title="单位性质" sortable></vxe-table-column>
        <vxe-table-column field="check" title="操作" width="120" sortable>
          <template #default="{ row }">
            <div v-if="row.check">{{row.check}}</div>
            <el-link @click="goViewOrg(row)" v-else type="primary">工作检查 <i class="iconfont icon-return-key"></i> </el-link>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
  import { statistics_org4provence,orgFocusType,orgProperty,statistics_viewOrg,back2provence } from '@/api/statistics.js'
  import {
    setToken,
  } from '@/utils/auth'
  export default {
    data() {
      return {
        defaultDataList: [],
        dataList: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        loading: false,
        filterName: '',
        searchProps: [],
        radio: 'search4school',
        dict_orgFocusType: {},
        dict_orgId2orgProperty: {},
        fullscreenLoading: false,
      }
    },
    created() {
      this.init_dict().then(()=>{
        this.getOrg4provence()
      })
    },
    methods: {
      goViewOrg(row) {
        statistics_viewOrg({orgId:row.orgId}).then(res=>{
          if(res.code === 200) {
            setToken(res.data.token)
            window.sessionStorage.setItem('orgName',row.name)
            let userId = res.data.userId
            let roleId = res.data.roleId
            window.sessionStorage.setItem('userId',userId)
            window.sessionStorage.setItem('roleId',roleId)
            window.sessionStorage.setItem('statisticsMenu',false)
            window.sessionStorage.removeItem('regulationCount')
            window.sessionStorage.removeItem('planData')
            window.sessionStorage.removeItem('metaCount')
            this.$router.push('/dashboard')
            this.$store.dispatch('user/getMenu',{userId:userId,roleId:roleId}).then((res)=>{
              setTimeout(()=>{
                window.location.reload()
              },200)
            })
          }else{
            this.$message.warning('该机构当前不允许工作检查!')
          }
        })
      },
      radioChange(e) {
        this.getOrg4provence()
      },
      getOrg4provence() {
        statistics_org4provence({searchType: this.radio}).then(res=>{
          if(res.code === 200 && res.data.length!=0) {
            res.data.forEach(item=>{
              if(this.dict_orgFocusType[item.orgId]){
                item.orgFocusType = this.dict_orgFocusType[item.orgId]
              }else{
                item.orgFocusType = '未填写'
              }
              if(this.dict_orgId2orgProperty[item.orgId]){
                item.orgProperty = this.dict_orgId2orgProperty[item.orgId]
                item.check = this.dict_orgId2orgProperty[item.orgId]
              }else{
                item.orgProperty = '训练机构'
              }
            })
            this.searchProps = Object.keys(res.data[0])
            this.defaultDataList = res.data
          }else{
            this.defaultDataList = []
          }
        }).then(()=>{
          this.findList()
        })
      },
      init_dict() {
        return new Promise((resolve,reject)=>{
          orgProperty().then(res=>{
            res.data.forEach(item=>{
              this.dict_orgId2orgProperty[item.areaId] = '主管厅局'
            })
          })
          orgFocusType().then(res=>{
            if(res.code === 200 && res.data.length!=0){
              res.data.forEach(item=>{
                this.dict_orgFocusType[item.orgId] = item.name
              })
              resolve()
            }
          })
        })
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = new RegExp(filterName, 'gi')
          const searchProps = this.searchProps
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
        } else {
          this.dataList = this.defaultDataList
          this.findList()
        }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
        this.page.pageSize = this.defaultDataList.length
        this.findList()
      },
      findList() {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.page.totalResult = this.defaultDataList.length
          this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
            .pageSize, this.page.currentPage * this.page.pageSize)
        }, 300)
      },
    }
  }
</script>

<style lang="scss" scoped>
.container{
  padding: 10px;
  background-color: #FFFFFF;
}
</style>
